<script setup lang="ts">

import HelloWorld from './components/HelloWorld.vue'

</script>

<template>
  <div class="app-layout">
    <!-- Title bar -->
    <!-- <div class="title-bar">
      <div class="title">Electron Vite Vue</div>
      <div class="window-controls">
        <el-button size="small" circle @click="handleMinimize">
          <el-icon><Minus /></el-icon>
        </el-button>
        <el-button size="small" circle @click="handleMaximize">
          <el-icon><FullScreen v-if="!isMaximized" /><CopyDocument v-else style="transform: rotate(180deg);" /></el-icon>
        </el-button>
        <el-button size="small" circle type="danger" @click="handleClose">
          <el-icon><Close /></el-icon>
        </el-button>
      </div>
    </div> -->

    <!-- Main content area -->
    <div class="content-area">
      <!-- Sidebar -->
      <div class="sidebar-container">
        <div class="sidebar"></div>
          <div class="sidebar-footer">
            <!-- 侧边栏折叠按钮 -->
            <button > button 1</button>
            
            <!-- 主题切换按钮 -->
            <button > button 2</button>
          <!-- 折叠状态下的语言切换图标按钮 -->
        </div>
      </div>
      
      <!-- Main content -->
      <main class="main-content">
        <router-view />
      </main>
    </div>
  </div>
</template>

<style>
.app-layout {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.content-area {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.sidebar-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-right: 1px solid var(--el-border-color-lighter);
}
.sidebar {
  flex: 1;
  height: calc(100% - 70px);
  border-right: none;
}
.sidebar-footer {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  padding: 1rem;
  width: 200px;
  box-sizing: border-box;
  border-top: 1px solid var(--el-border-color-lighter);
  background-color: var(--el-menu-bg-color);
}
.main-content {
  flex: 1;
  overflow: auto;
}
</style>
